<template>
  <div class="user-page">
    <!-- 产品信息 -->
    <div class="card-item">
      <div class="title font-24 margin-bot30">
        <div>产品信息</div>
        <div v-if="store.superUser < 2" @click="closeBtn(true)">
          <icons class="edit-icon" name="editIcon" />
        </div>
      </div>
      <div class="label-item">
        <div class="label-txt">产品名称</div>
        <div class="label-input">
          <n-input
            maxlength="50"
            readonly
            v-model:value="productInfo.productName"
            type="text"
            placeholder=""
          />
        </div>
      </div>
      <div class="label-item">
        <div class="label-txt">产品版本号</div>
        <div class="label-input">
          <n-input
            maxlength="50"
            readonly
            v-model:value="productInfo.productVersion"
            type="text"
            placeholder=""
          />
        </div>
      </div>
      <div class="title font-24 margin-bot30 margin-top40">公司信息</div>
      <div class="logo-box">
        <div class="label-txt">公司LOGO</div>
        <div class="logo-div">
          <img class="companyLogo" :src="productInfo.companyLogo" alt="" />
        </div>
      </div>
      <div class="label-item">
        <div class="label-txt">公司名称</div>
        <div class="label-input">
          <n-input
            maxlength="50"
            readonly
            v-model:value="productInfo.companyName"
            type="text"
            placeholder="请输入公司名称"
          />
        </div>
      </div>
      <div class="title font-24 margin-bot30 margin-top40">其他信息</div>
      <div
        v-for="(item, i) in productInfo.otherInfoData"
        :key="i"
        class="label-item"
      >
        <div class="label-txt">{{ item.key }}</div>
        <div class="label-input">
          <n-input
            maxlength="50"
            readonly
            v-model:value="item.value"
            type="text"
            placeholder="请输入产品名称"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useAppStore } from "@/store/modules/user";
import { GetMdsInfomation } from "@/server";
const store = useAppStore();
const productInfo = ref({
  productName: "",
  productVersion: "",
  companyLogo: "",
  companyName: "",
  otherInfo: "",
}) as any;
/**
 * @description: 获取产品信息
 * @return {*}
 * @author: cool panda
 */
const GetMdsInfomationFun = async () => {
  const res: any = await GetMdsInfomation({});
  if (res.result.isSuccess) {
    const result = res.result.result;
    if (result) {
      productInfo.value = result;
    }
  } else {
    store.error(res.result.message); // 错误提示
  }
};
onMounted(() => {
  GetMdsInfomationFun();
});
</script>
<style lang="less" scoped>
:deep(.n-input) {
  --n-color: rgba(57, 66, 72, 1) !important;
  --n-color-focus: rgba(57, 66, 72, 1) !important;
  --n-text-color: rgb(255, 255, 255) !important;
  --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
  --n-border-hover: 1px solid #02a8ae !important;
  --n-border-focus: 1px solid #02a8ae !important;
  --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

:deep(.n-input__input) {
  text-align: left !important;
}

.user-page {
  background: #394248;
  height: calc(100vh - 2.4rem);
  overflow: hidden;
  .card-item {
    width: 497px;
    height: 680px;
    color: #fff;
    padding: 25px;
    background-color: #394248;
    margin-right: 10px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #02a8ae;
      // text-align: left;
    }

    .font-24 {
      font-size: 1.2rem;
    }

    .font-16 {
      font-size: 0.825rem;
    }

    .margin-bot30 {
      margin-bottom: 1rem;
    }

    .margin-top40 {
      margin-top: 30px;
    }

    .user-info {
      display: flex;
      flex-direction: column;
      margin: 66px 0 180px 0;

      .user-name {
        margin-top: 30px;
      }
    }

    .btn-box {
      display: flex;
      flex-direction: column;
      align-items: center;

      .btn-item {
        width: 277px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 30px;
      }

      .btn-item:last-child {
        margin-bottom: 0;
      }

      .bg-blue {
        background: #02a8ae;
      }

      .bg-yellow {
        background: #ee9708;
      }
    }

    .label-item {
      display: flex;
      align-items: center;
      height: 35px;
      margin-bottom: 20px;

      .label-txt {
        width: 100px;
        text-align: left;
        margin-right: 10px;
      }
    }

    .label-item:last-child {
      margin-bottom: 0;
    }

    .logo-box {
      display: flex;
      margin-bottom: 25px;

      .label-txt {
        width: 100px;
        text-align: left;
        margin-right: 10px;
      }

      .logo-div {
        width: 90px;
        height: 90px;
        border: 1px solid rgba(255, 255, 255, 0.3);

        .companyLogo {
          width: 100%;
          object-fit: contain;
        }
      }
    }

    .tab-class {
      color: #fff;
    }

    .search-box {
      display: flex;
      justify-content: space-between;
      height: 35px;
      margin-bottom: 20px;

      .add-btn {
        font-size: 14px;
        color: #fff;
        background-color: #01c0e4;
        margin-left: 30px;
        // border: none;
      }
    }
  }
}
</style>
